<template>
  <div>
    <van-nav-bar fixed :title="detail.community">
      <template #left>
        <van-icon color="#fff" name="arrow-left" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in detail.houseImg" :key="index">
        <img :src="'http://liufusong.top:8080' + image" />
      </van-swipe-item>
    </van-swipe>
    <!-- /轮播图 -->
    <van-cell :title="detail.title || '暂无标题'" size="large" />
    <van-cell size="large">
      <template>
        <van-tag
          v-for="item in detail.tags"
          :key="item"
          color="#7232dd"
          plain
          >{{ item }}</van-tag
        >
      </template>
    </van-cell>
    <van-grid column-num="3">
      <van-grid-item text="租金">
        <template #icon>
          <span class="icon">{{ detail.price }}/月</span>
        </template>
      </van-grid-item>
      <van-grid-item text="房型">
        <template #icon>
          <span class="icon">{{ detail.roomType }}</span>
        </template>
      </van-grid-item>
      <van-grid-item text="面积">
        <template #icon>
          <span class="icon">{{ detail.size }}平方</span>
        </template>
      </van-grid-item>
    </van-grid>
    <van-grid>
      <van-grid-item>
        <template>
          <span class="label">装修：</span>
          {{detail}}
        </template>
      </van-grid-item>
      <van-grid-item />
    </van-grid>
  </div>
</template>

<script>
import { houseDetail } from '@/api/home.js'
export default {
  props: {
    id: {
      type: String
    }
  },
  data () {
    return {
      detail: {}
    }
  },

  created () {
    this.getDetail()
  },

  methods: {
    async getDetail () {
      try {
        const res = await houseDetail(this.id)
        this.detail = res.data.body
      } catch (err) {
        this.$toast('获取失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-grid {
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
  margin: 15px 0;
  padding: 15px 0;
  .van-grid-item__content {
    border: none;
  }
}
/deep/.van-swipe {
  min-height: 200px;
  margin-top: 46px;
  .van-swipe-item {
    height: 250px;
    width: 375px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
/deep/.van-cell__title {
  font-size: 16px;
}
.icon {
  color: #fa5741;
  font-size: 18px;
  font-weight: bolder;
}
</style>
